<template>
    <ul class="icon-selector">
        <li v-for="(icon, key) in icons" :key="`${key}`" :class="{ 'active': selectedIcon==icon }">
            <i :class="['iconfont', icon]" :type="icon" :style="{ fontSize: '36px' }" @click="handleSelectedIcon(icon)" />
        </li>
    </ul>
</template>

<script>
import icons from './icons'

export default {
    name: 'IconSelect',
    data() {
        return {
            selectedIcon: '',
            icons
        }
    },
    methods: {
        handleSelectedIcon(icon) {
            this.selectedIcon = icon
            this.$emit('change', icon)
        }
    }
}
</script>

